<template>
  <!-- 十八项反措头部 -->
  <div class="eighteen-body bigTableStyle">
    <el-form :inline="true" :model="formInline" label-width="1rem">
      <el-row>
        <el-col :span="4">
          <el-form-item label="单位名称:">
            <el-select v-model="formInline.region" placeholder="单位名称">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="变电站:">
            <el-select v-model="formInline.region" filterable placeholder="变电站">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="设备类型:">
            <el-select v-model="formInline.region" placeholder="设备类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="电压等级:">
            <el-input v-model="formInline.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="设备名称:">
            <el-input v-model="formInline.user" placeholder="设备名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="检测类型:">
            <el-select v-model="formInline.region" placeholder="检测类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="检测来源:">
            <el-select v-model="formInline.region" placeholder="检测来源">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="诊断结论:">
            <el-select v-model="formInline.region" placeholder="诊断结论">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="审核结论:">
            <el-select v-model="formInline.region" placeholder="审核结论">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="缺陷类型:">
            <el-select v-model="formInline.region" placeholder="缺陷类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="检测状态:">
            <el-select v-model="formInline.region" placeholder="检测状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="检测时间:">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="20" class="btn">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class EighteenHead extends Vue {
  private options: Array<optionList> = [
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
    {
      value: "选项3",
      label: "蚵仔煎",
    },
  ];
  private value: string = "";
  private formInline: object = {
    user: "",
    region: "",
  };
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      value: "",
      formInline: {
        user: "",
        region: "",
      },
    };
  }
  private onSubmit() {
    // console.log("submit!");
  }
}
</script>

<style lang='scss' scoped>
.eighteen-body {
  .btn {
    display: flex;
    justify-content: flex-end;
    padding-right:0.34rem;
  }
}
</style>
<style lang="scss">
.eighteen-body {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-form--inline .el-form-item__content {
    width: 55%
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>
